<template>
	<swiper style="height: 142rpx;" :vertical="true" disable-touch circular previous-margin="62rpx" next-margin="8rpx"
		:current="current" @change="change" autoplay :interval="5000">
		<swiper-item @touchmove.stop="" class="swiper-item" v-for="(item,index) in list" :key="index">
			<view :class="{active: current === index}">{{item}}</view>
		</swiper-item>
	</swiper>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted,
		defineProps
	} from 'vue';
	defineProps({
		list: {
			type: Array,
			default: () => []
		}
	})
	const current = ref(0)

	const change = (e : { detail : { current : number } }) => {
		current.value = e.detail.current
	}
</script>

<style lang="scss" scoped>
	.swiper-item {
		height: 56rpx;
		width: calc(100% - 48rpx);
		@include flexR;
		justify-content: flex-end;
		margin: 0 auto;
		margin-bottom: 12rpx;

		view {
			height: 64rpx;
			@include flexRC;
			padding: 0 24rpx;
			margin-right: 24rpx;
			background-color: rgba(0, 0, 0, .75);
			opacity: 0;
			border-radius: 12rpx;
			@include dfont(24rpx);
			color: #fff;
			transition: all .6s ease-out;
		}

		.active {
			opacity: 1;
		}
	}
</style>